{% if isTemplate != true %}
{% include account_nav %}
{% endif %}

<div class="container_wrapper account_orders" id="account_orders">
  <h1 class="title">{{lang.account.default.orders}}</h1>
  {% assign length = account_order.orders | size %}

  {% if length %}

  {% for item in account_order.orders %}
  <div class="order-card">
    <div class="order-card-header">

      <dl>
        <dt>{{lang.account.orders.order_number}}</dt>
        <dd style="font-weight: 500;">{{ item.order_number }}</dd>
      </dl>

      <dl>
        <dt>{{lang.account.orders.order_status}}</dt>
        <dd style="color: #666666;">{{ item.financial_status_name | upcase }}</dd>
      </dl>

      <dl>
        <dt>{{lang.account.orders.total_price}}</dt>
        <dd style="color: #E61132;font-weight: 500;">{{ item.total_price | money:item.currency, true, false }}</dd>
      </dl>

      <dl>
        <dt>{{lang.account.orders.date}}</dt>
        <dd style="color: #666666;" class="order-text-medium format-date" data-date="{{item.created_at}}" data-format="YYYY-mm-dd">{{ item.created_at | date: "%Y-%m-%d" }}</dd>
      </dl>

 
    </div>
    <div class='product-box'>
    {% for product in item.products %}
    {% assign keyIndex = forloop.index %}
    <div class="order-card-content" {% if  keyIndex > 1 %}style="display:none"{% endif %}>
      <div class="order-card-info">
        <a class="order-card-info-picture" style="position:relative" href="/products/detail/{{product.product_id}}?data_from={{data_from}}">
          <img data-src="{{ product.src|public_front_asset_url }}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}" class="order-card-info-picture-image" alt="{{product.product_title}}" />
				  							{% if product.log_src %}
													<img src="{{product.log_src|public_front_asset_url}}" style="position: absolute;bottom: 0;right: 0;background-color: #e8e8e8;width: 16px;height: 16px;border-radius: 50%;">
												{% endif %}
        </a>
        <div class="order-card-info-detail">
          <a class="order-card-info-title line-clamp2" href="/products/detail/{{product.product_id}}?data_from={{data_from}}" style="text-align: left;">{{product.product_title}}</a>

          {% include 'product_sku_spu_show', className:"order-card-info-sku",style:"color: var(--color-main);",spu:product.spu,sku:product.sku %}

          {% if item.products[0].sku_value %}
          <div class="order-card-info-sku">{{product.sku_value}}</div>
          {% endif %}
          {% include 'product_custom_option', customOption:product.property,index: forloop.index %}

          <div class="order-card-info-price">
            <span>{{product.price | money:item.currency, true, false }}</span>
            <span>x</span>
            <span>{{product.quantity}}</span>
            <span>=</span>
            <span>{{product.price | times:product.quantity | item:info.currency, true, false }}</span>
          </div>
          
        </div>
      </div>
  
    </div>
    {% endfor %}
    </div>

    <div class="order-card-footer">
      {% assign productSize = item.products | size %}
      {% if productSize == 1 %}
      <div class=""></div>
      {% else %}
      <div class="order-card-footer-full">{{lang.account.orders.show_full}}</div>
      {% endif %}
      <div class="order-card-handle">
        {%- assign storeConfigBuyagain = theme_config.global.store_config_buyagain | default: '1'  -%}
        {% if storeConfigBuyagain == "1" %}
         <a class="mo-btn main_btn buy_again" data-order-id="{{item.id}}" href="javascript:;">{{lang.account.orders.buy_again}}</a>
        {% endif %}
        {% if item.pay_button_show %}
        <a class="mo-btn main_btn" style="margin-left: 10px;" href="{{item.pay_url}}">{{lang.account.orders.pay_now}}</a>
        {% endif %}
        <a class="mo-btn secondary_btn" href="/account/orders/{{item.order_number}}">{{lang.account.orders.property_detail}}</a>
      </div>
    </div>
  </div>
  {% endfor %}  
  {% include pagination ,{paginate:paginate } %}
  {% else %}
  {% include empty ,{text:lang.account.orders.empty,icon:'order',btnText:lang.account.orders.empty_btn_text,isBtn:true}%}
  {% endif %}

  <div class="back-box">
    <a href="/account">
      <svg t="1642570712144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24369" width="24" height="24"><path d="M85.333333 512.042667l320-256v213.333333H1024v85.333333H405.333333v213.333334z" p-id="24370"></path></svg>
      <span>{{ lang.account.default.account }}</span>
    </a>
  </div>
</div>

<script type="text/javascript">
  (function () {
    $(".order-card-footer-full").click(function () {
      const type = $(this).data("type");
      if (type === "hide") {
        const products = $(this).parent().siblings('.product-box').children(".order-card-content");
        products.hide();
        products.eq(0).show();
        $(this).html(`{{lang.account.orders.show_full}}`);
        $(this).data("type", 'show');
      } else {
        const products = $(this).parent().siblings('.product-box').children(".order-card-content");
        products.show()
        $(this).html(`{{lang.account.orders.show_less}}`);
        $(this).data("type", 'hide');
      }

    })

    $(".buy_again").click(function(){
      const load = moi.nodeShowLoading(this);
      const orderId = $(this).data("order-id");

      moi.ajax({
                url: "/account/buyagain",
                type: "post",
                data: JSON.stringify({id:orderId}),
                complete: function () {
                    load.close();
                },
                success: function (data) {
                    if (!data.code) {
                      if(data.data){
                          return location.href = '/cart'
                      }
                    }else{
                      return  moi.alert({ title: data.msg });
                    }
                    
                }
       });
    })
  })()
</script>